$('#writeModal').on('show.bs.modal', function (e) {
});

var App=React.createClass({
  studioId:"",
  getInitialState:function(){

    return {
      tabs:[{
        name:"我的文章",
        active:true
      },
      {
        name:"资料编辑",
        active:false
      },
      {
        name:"学员信息",
        active:false
      },
      {
        name:"画材订购",
        active:false
      },
      {
        name:"画作评讲",
        active:false
      },
      {
        name:"教师队伍",
        active:false
      }
      ],
      studio:null
    };
  },
  getActiveTab:function(){
    var name;
    this.state.tabs.forEach(function(tab){
      if(tab.active) name=tab.name;
    });
    return name;
  },
  componentDidMount:function(){
    this.studioId=cookie.getCookie("studioId");
    if(this.studioId==""){
      window.location.href="login.html";
      return;
    }else{
      $.ajax({
        url:"msq/api/studio/"+this.studioId,
        type:"GET",
        success:function(d){

          this.setState({studio:d.studio});
           console.log(this.state);
        }.bind(this),
        error:function(){
          //window.location.href="login.html";
          alert("获取数据出错");
        }
      });
    }

  },
  fetchData:function(){
    $.ajax({
      url:"msq/api/studio/"+this.studioId,
      type:"GET",
      success:function(d){
        console.log("获取画室数据",d);
        this.setState({studio:d.studio});
      }.bind(this),
      error:function(){
        alert("获取数据出错");
      }
    });
  },
  switchTabHandler:function(event){
    var $liClicked=$(event.target);
    var tabsNew=this.state.tabs.concat();
    var activeName=$liClicked.text();
    tabsNew.forEach(function(tab){
      if(tab.name!=activeName){
        tab.active=false;
      }else{
        tab.active=true;
      }
    });
    this.setState({tabs:tabsNew});
  },
  render:function(){
    this.studioId=cookie.getCookie("studioId");
    if(this.studioId==""){
      window.location.href="login.html";
      return;
    }
    var tabBody;
    switch(this.getActiveTab()){
      case "我的文章":
        tabBody=<ArticlePage studioId={this.studioId} studioName={this.state.studio?this.state.studio.name:"未知画室"} studioAvatar={this.state.studio?this.state.studio.avatarUrl:"image/studioAvatar.png"}/>;
      break;
      case "资料编辑":
        tabBody=<InfoEditPage studioId={this.studioId} studioName={this.state.studio?this.state.studio.name:"未知画室"} brief={this.state.studio?this.state.studio.description:"无"} city={this.state.studio?this.state.studio.city:""} phone={this.state.studio.phone? this.state.studio.phone: ""} refresh={this.fetchData}/>;
      break;
      case "学员信息":
        tabBody=<StudentMsgPage studioId={this.studioId}/>;
      break;
      case "画材订购":
        tabBody=<MerchantPage studioId={this.studioId}/>;
      break;
      case "画作评讲":
        tabBody=<StudioCommentPage studioId={this.studioId}/>;
      break;
      case "教师队伍":
        tabBody=<TeachersPage studioId={this.studioId}/>;
      break;
    }
    return (
      <div>
        <TopBar/>
        <div id="content">
          <StudioInfoBox data={this.state.studio} reload={this.fetchData}/>
          <SwitchTabs switchTabHandler={this.switchTabHandler} tabs={this.state.tabs}/>
          {tabBody}
        </div>
        
      </div>
      );
  }
});
var TopBar=React.createClass({
  render:function() {
    return ( 
           <div id="topBar">
              <img src="image/logo.png" id="logo"/> 
           </div>
           );
  }
});
var StudioInfoBox=React.createClass({
  imgFiles:[],
  componentDidMount:function(){
    function getFiles_Avatar(e) {
      // isUpload = false;
      e = e || window.event;
      //获取file input中的图片信息列表
      var files = e.target.files,
        //验证是否是图片文件的正则
        reg = /image\/.*/i,
        fileType,
        fileName,
        fileNames="";

      for(var i=0,len=files.length;i<len;i++){
        fileType = files[i].type;
        fileName = files[i].name; 
        if (!reg.test(fileType)) {
          alert("你选择的" + fileName + "文件不是图片");
          self.imgFiles.splice(0,self.imgFiles.length);//清空数组
          return;
        }
        self.imgFiles.push(files[i]);
        fileNames+=fileNames==""?fileName:","+fileName;
      }
      if(fileNames.length>50){
        fileNames=fileNames.substring(0,50)+"...";//截取过长字符串
      }
      fileNames+="等"+len+"个文件";
      $(".selectedFileName_Avatar").text(fileNames);//提示选择的文件
      
    }
    var self=this;
    // //上传作品
    $(".StudioInfoBox").on("click","#selectAvatar",function(){
      var $AvatarFileInput =$("#AvatarFileInput");
      $AvatarFileInput.click();
    });
    
    $(".StudioInfoBox").on("change","#AvatarFileInput",getFiles_Avatar);
    $(".StudioInfoBox").on("click", "#uploadAvatarBtn",function(event) {
      event.preventDefault();
      
      if (self.imgFiles.length == 0) {
        alert("未选择图片");
      } else {
        $("#uploadAvatarBtn").attr("disabled", "disabled") //禁用上传按钮
        .text("上传中");
        uploadImgFiles(self.imgFiles, self.setAvatar);
      }


    });
  },
  logout:function(){
    cookie.setCookie("studioId","");
    window.location.href="login.html";
  },
  emptyInput_Avatar:function () {
    $(".selectedFileName_Avatar").text("");
    var fileInput = $("#AvatarFileInput")
    fileInput.after(fileInput.clone().val(""));
    fileInput.remove();
  },
  setAvatar:function(responseUrls){
    $.ajax({
      url:config.api.setStudioAvatar[0].replace(/\<\w+\>/,this.props.data.studioId),
      type:config.api.setStudioAvatar[1],
      data:{
        avatarUrl:responseUrls[0]
      },
      success:function(d){
        var self=this;
        $("#uploadAvatarBtn").text("添加成功");
        setTimeout(function(){
          $('#uploadAvatarModal').modal('hide');
          $("#uploadAvatarBtn").text("立即上传").removeAttr("disabled");
          self.emptyInput_Avatar();
          self.props.reload();
        },500);
        
      }.bind(this),
      error:function(){
        alert("修改头像出错");
      }
    });
  },
  render:function() {
    if(this.props.data===null){
      return (<div className="StudioInfoBox">
              <p>加载中</p>
             </div>);
    }else{
      return (<div className="StudioInfoBox">
        				<div className="changeCoverBox">
        					<img src="image/changeCover.png" />
        				</div>
                <div className="StudioInfoBox_avatar_wrapper">
                  <img src={this.props.data.avatarUrl}/>
                  <div className="avatar-mask"  data-toggle="modal" data-target="#uploadAvatarModal"></div>
                </div>
                <div className="textBox">
                    <h4>{this.props.data.name}</h4>
                    <p>粉丝数{this.props.data.fanNum}</p>
                    <p>浏览量 0</p>
                </div>
                <button id="logoutBtn" onClick={this.logout}>退出登录</button>  
                <div className="modal fade" id="uploadAvatarModal" tabindex="-1" role="dialog" aria-labelledby="uploadAvatarModalLabel" aria-hidden="true">
                  <div className="modal-dialog">
                    <div className="modal-content uploadAvatarContainer">
                      <div className="uploadAvatarBody">
                        <p className="selectedFileName_Avatar"></p>

                        <div className="uploadAvatarInput">
                          <button className="btn btn-primary btn-md" id="selectAvatar">选择文件</button>
                          <input type="file" name="image" id="AvatarFileInput" className="hide"/>
                        </div>

                        <button className="btn btn-primary btn-md" id="uploadAvatarBtn" >立即上传</button>   

                      </div>
                    </div>
                  </div>
                  <div className="cancel" aria-hidden="true" data-dismiss="modal">
                  </div>
                </div>
             </div>);
    }

  }
});
//页面切换标签
var SwitchTabs=React.createClass({
  handleClick:function(event){
    this.props.switchTabHandler(event);
  },
  render:function(){
    var tabs=this.props.tabs.map(function(tab){
            if(tab.active){
              return (
                <li className="tab-nav active">{tab.name}</li>
                );
            }else{
              return (
                <li className="tab-nav">{tab.name}</li>
                );
            }
          }); 
    return (
      <div className="tabs">
        <ul onClick={this.handleClick}>
        {tabs}
        </ul>
      </div>
      );
  }
});
var Footer=React.createClass({
  render:function(){
    return (
    <div className="footer">
      <div className="footerContent">
        <ul className="footerList">
          <li><a href="#">关于我们</a></li>
          <li><a href="#">联系我们</a></li>
          <li><a href="#">广告业务</a></li>
        </ul>
        <p className="icp">粤ICP备15069955号</p>
        <h2>美术圈</h2>
      </div>

    </div>
      );
  }
});
React.render(
  <App/>,
  document.getElementById('container')
);
